<template>
  <div class="index-tracker-root">
    <div class="index-tracker-top">
      <div class="qa">
        <qaTracker />
      </div>
      <div class="table-container info-root">
        <div class="table-operator">
          <el-input v-model="traceId" placeholder="TraceId" style="margin-right: 10px" />
          <el-input v-model="appName" placeholder="应用名称" style="margin-right: 10px" />
          <el-button @click="getTracesApi" type="primary">搜索</el-button>
          <el-button @click="testTrace" type="primary">测试追踪</el-button>
        </div>
        <div class="table">
          <el-table border height="100%" tooltip-effect="dark" v-loading="tableLoading"
            element-loading-text="正在聚合链路追踪日志, 请稍后..." :highlight-current-row="true" :data="tableDatas"
            @row-click="rowClick">
            <el-table-column prop="spanName" min-width="370" :show-overflow-tooltip=true label="名称">
              <template #default="scope">
                <div v-html="scope.row.spanName"></div>
              </template>
            </el-table-column>
            <el-table-column prop="spanInterval" width="60" label="耗时ms" align="right" />
            <el-table-column prop="nodeCount" width="54" label="Spans" align="right" />
            <el-table-column prop="spanType" width="120" :show-overflow-tooltip=true label="类型" />
            <el-table-column prop="appName" width="120" :show-overflow-tooltip=true label="应用" />
            <el-table-column prop="traceId" width="250" :show-overflow-tooltip=true label="TraceId" />
            <el-table-column prop="spanStart" width="160" :show-overflow-tooltip=true label="日期" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="index-tracker-bottom">
      <div class="table-tree info-root">
        <tableTraceTree :trace-id="currentTraceId" ref="TableTraceTreeRef" />
      </div>
      <div class="chart info-root">
        <chartBarTrace :trace-id="currentTraceId" ref="ChartBarTraceRef" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessageBox } from 'element-plus'
import { tracesApi, testTraceApi } from "@/api/tracker";
import { isNull } from "@/assets/utils/obj";
import qaTracker from "./QATracker.vue";
import tableTraceTree from "./TableTraceTree.vue";
import chartBarTrace from "./ChartBarTrace.vue";

const traceId = ref('');
const appName = ref('');
const tableLoading = ref(false);
const tableDatas = ref([{
  traceId: ''
}]);
const currentTraceId = ref('');
const TableTraceTreeRef = ref();
const ChartBarTraceRef = ref();

const getTracesApi = () => {
  let param = {
    traceId: traceId.value,
    appName: appName.value,
    pageNum: 1,
    pageSize: 30
  }
  tableLoading.value = true;
  tableDatas.value = [];
  tracesApi(param).then(resp => {
    tableDatas.value = resp.data.map((span: any) => {
      if (isNull(span.spanName)) {
        span.spanName = 'ROOT节点尚未持久化';
      }
      return span;
    });
    rowClick(tableDatas.value[0]);
  }).finally(() => {
    tableLoading.value = false;
  })
}

const testTrace = () => {
  testTraceApi().then(resp => {
    traceId.value = resp.data;
    ElMessageBox.alert('发送成功, 请稍后使用[' + resp.data + ']作为traceId进行查询。', '成功', {
      confirmButtonText: '了解',
      type: 'success',
    });
  });
}

const rowClick = (row: any) => {
  currentTraceId.value = row.traceId;
  TableTraceTreeRef?.value?.reload();
  ChartBarTraceRef?.value?.reload();
}


onMounted(() => {
  getTracesApi();
});

</script>

<style scoped lang="scss">
.index-tracker-root {
  @include box(100%, 100%);
  @include flex(column, flex-start, center);

  .info-root {
    border: 0;
  }

  .index-tracker-top {
    @include box(100%, 320px);
    @include flex(row, flex-start, center);

    .qa {
      @include box(490px, 100%);
    }

    .table-container {
      @include box(calc(100% - 490px), 100%);
      margin-left: 15px;
      padding: 10px;

      .table-operator {
        @include box(100%, 25px);
        @include flex(row, flex-start, flex-start);
        margin-bottom: 5px;
      }

      .table {
        @include box(100%, calc(100% - 30px));
      }
    }
  }

  .index-tracker-bottom {
    @include box(100%, calc(100% - 320px));
    @include flex(column, flex-start, center);
    padding-top: 15px;

    .table-tree {
      @include box(100%, 200px);
      padding: 10px;
    }

    .chart {
      @include box(100%, calc(100% - 200px));
      border: 1px solid;
      border-color: #EFEFEF;
      margin-top: 15px;
      padding: 5px 0 0 5px;

      [class="dark"] & {
        border-color: #262727;
      }
    }
  }

  :deep(.el-table--small .el-table__cell) {
    padding: 1px 0;
  }
}
</style>